<script setup>
import { ref } from "vue";
import { onClickOutside } from "@vueuse/core";
defineProps({
  msg: String,
});
const flag = ref(true);
const showFade = ref(true);
const disabled = ref(true);

function warnDisabled() {
  disabled.value = true;
  setTimeout(() => {
    disabled.value = false;
  }, 1500);
}
</script>

<template>
  <button @click="flag = !flag">切换</button>
  <div>
    1. animate官网：https://animate.style/ 2. 安装npm install animate.css--save
    3. 要在全局导入 import 'animate.css'; 4. 4以上的版本要加前缀
    animate__animated
    <transition
      enter-active-class="animate__animated animate__bounceIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <div v-if="flag">transition.css， 配置Animate.css</div>
    </transition>
    <div :class="{ shake: disabled }">
      <button @click="warnDisabled">Click me</button>
      <span>This feature is disabled!</span>
    </div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.shake {
  animation: shake 1s linear 1;
}
@keyframes shake {
  25% {
    transform: translateY(-20px);
  }
  75% {
    transform: translateY(20px);
  }
  0%,
  50%,
  100% {
    transform: translateY(0);
  }
}
</style>
